<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            placeholder="请输入内容"
            v-model="formInline.name"
            class="input-with-select"
          >
            <el-select
              v-model="formInline.type"
              slot="prepend"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="申请时间：">
          <el-date-picker
            v-model="formInline.applyTime"
            type="date"
            placeholder="选择日期" 
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联动状态：">
          <el-select v-model="formInline.linkageStatus" placeholder="全部">
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <!-- <el-button type="primary" icon="el-icon-download" @click="downexport"
          >导出</el-button
        > -->
        <export-excel-button
          title="商家联动表"
          action="/linkage/v1/linkage/export"
          :params="ExportParams"
        />
      </div>
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
      </ex-table>
    </div>
  </div>
</template>
<script>
// components
import { adminGeiLinkageList, adminDict } from "@/api/merchants";
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  //   name: "",
  components: {
    ExportExcelButton,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      changeIndex: 0,
      loading: false,
      formInline: {
        name: "",
        linkageStatus: "",
        applyTime: "",
        type: "",
      },
      date: [],
      options: [
        {
          value: "1",
          label: "账户名称",
        },
        {
          value: "2",
          label: "资产名称",
        },
      ],
      options2: [],
      type: "",
      activeName: "first",
      tablelist: ["全部", "待处理", "已处理"],
      tableData: [],
      tableColumn: [
        { prop: "sponsorMerchantName", label: "申请商户名称" },
        {
          prop: "sponsorMerchantAssetName",
          label: "申请关联资产名称（A）",
          width: "200",
        },
        { prop: "allianceMerchantName", label: "关联商户名称" },
        { prop: "allianceMerchantAssetName", label: "关联资产名称（B）" },
        { prop: "exchangeTypetxt", label: "兑换类型（A-B）" },
        { prop: "assetValuetxt", label: "资产价值（A-B）" },
        { prop: "proportion", label: "兑换比例（A：B）" },
        { prop: "validitytxt", label: "发行有效期",width:"180" },
        { prop: "statusDict", label: "联动状态", width: "110" },
        { prop: "createTime", label: "申请时间" },
      ],
    };
  },
  created() {
    this.getlinkagelist()
    this.getList();
  },
  computed: {
    ExportParams() {
      const { id: ticketId } = this;
      const params = {
        ...this.pageOptions,
        type: this.formInline.type,
        name: this.formInline.name,
        applyTime: this.formInline.applyTime,
        linkageStatus: this.formInline.linkageStatus,
      };
      return params;
    },
  },
  methods: {
    getlinkagelist() {
      //获取字典
      const params = {
        dictType: "merchant_linkage_status",
      };
      adminDict(params).then((res) => {
        var arr = [
          {
            id: "",
            value: "全部",
          },
        ];
        this.options2 = arr.concat(res.result[0].dictList);
      });
    },
    onSubmit() {
      //查询
      console.log(this.applyTime);
      console.log(this.formInline);
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    reset() {
      this.formInline = {};
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    getList() {
      const params = {
        ...this.pageOptions,
        type: this.formInline.type,
        name: this.formInline.name,
        applyTime: this.formInline.applyTime,
        linkageStatus: this.formInline.linkageStatus,
      };
      this.loading = true;
      adminGeiLinkageList(params)
        .then((res) => {
          const { total, records } = res.result;
          records.forEach((item) => {
            if(item.allianceMerchantAssetType==2){
              item.allianceMerchantWorth = '无'
            }else if(item.allianceMerchantAssetType==1){
              item.allianceMerchantWorth = '¥' + item.allianceMerchantWorth
            }
            if(item.sponsorMerchantAssetType==2){
              item.sponsorMerchantWorth = '无'
            }else if(item.sponsorMerchantAssetType==1){
              item.sponsorMerchantWorth = '¥' + item.sponsorMerchantWorth
            }
            item.assetValuetxt =  item.sponsorMerchantWorth + " - " + item.allianceMerchantWorth;

            item.validitytxt = item.startTime + "~" + item.endTime;
            if (
              item.sponsorMerchantAssetType == 1 &&
              item.allianceMerchantAssetType == 2
            ) {
              item.exchangeTypetxt = "积分-券";
            } else if (
              item.sponsorMerchantAssetType == 2 &&
              item.allianceMerchantAssetType == 1
            ) {
              item.exchangeTypetxt = "券-积分";
            } else {
              item.exchangeTypetxt = "积分-积分";
            }
          });
          this.tableData = records;
          this.$refs.table.pageOptions.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss">
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.head ::v-deep.el-input-group__prepend {
  width: 110px !important;
}
</style>
